<template>
	<view v-if="isShow">
		<page-container :show="isShow" position="center" :overlay="false" @beforeleave="onBeforeLeave">
			<view class="page-content">
				<view class="result">
					<u-navbar ref="navbarRef" class="van-nav-bar" :placeholder="true" title="测评报告" @leftClick="back" :autoBack="false"></u-navbar>
					<view class="wrapp" :style="{ height: domHeight }">
						<view class="bg"></view>
						<view class="wrap">
							<scroll-view class="scrollWrap" :enhanced="true" scroll-y :bounces="false" :show-scrollbar="false">
								<!-- 	<view class="head">
	        					<view>{{ resultObj.appraisalName }}报告</view>
	        					<view>测试时间：{{ resultObj.appraisalBeginDate }}</view>
	        				</view> -->
								<!-- 					<view class="score">
	        					<view>您的测评得分</view>
	        					<view></view>
	        					<view>{{ resultObj.appraisalScore }}</view>
	        				</view> -->
								<view class="result-little">
									<view>测评结果分析</view>
									<view></view>
									<view>
										<scl90-vue ref="scl90Ref" :resultObj="resultObj" v-if="appraisalId == 8"></scl90-vue>
										<anxiety-self-assessment ref="anxietyRef" :resultObj="resultObj" v-if="appraisalId == 7"></anxiety-self-assessment>
										<burnout ref="burnoutRef" :resultObj="resultObj" v-if="appraisalId == 1"></burnout>
										<careerInterest ref="careerRef" :resultObj="resultObj" v-if="appraisalId == 5"></careerInterest>
										<childRelationshipAssessment ref="AssessmentRef" :resultObj="resultObj" v-if="appraisalId == 10"></childRelationshipAssessment>
										<childRelationshipDiagnosis ref="DiagnosisRef" :resultObj="resultObj" v-if="appraisalId == 4"></childRelationshipDiagnosis>
										<depressionSelfAssessment ref="depressionRef" :resultObj="resultObj" v-if="appraisalId == 2"></depressionSelfAssessment>
										<maritalQuality ref="maritalRef" :resultObj="resultObj" v-if="appraisalId == 9"></maritalQuality>
										<perceivedStress ref="stressRef" :resultObj="resultObj" v-if="appraisalId == 6"></perceivedStress>
										<socialSupportRatingScale ref="socialSupportRef" v-if="appraisalId == 3" :resultObj="resultObj"></socialSupportRatingScale>
									</view>
								</view>
							</scroll-view>
							<view style="height: 166rpx"></view>
							<view class="notice-mask">
								<button class="notice-btn" @tap="goBack">返回首页</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</page-container>
	</view>
</template>

<script>
import { getUserAppraisalResult } from '@/api/evaluate/index.js';
import scl90Vue from './cnps/scl90.vue'; //8
import anxietySelfAssessment from './cnps/anxietySelfAssessment.vue'; //焦虑自我评估7
import burnout from './cnps/burnout.vue'; //职业倦怠1
import careerInterest from './cnps/careerInterest.vue'; //霍兰德职业兴趣5
import childRelationshipAssessment from './cnps/childRelationshipAssessment.vue'; //亲子关系诊断10
import childRelationshipDiagnosis from './cnps/childRelationshipDiagnosis.vue'; //亲子关系评估4
import depressionSelfAssessment from './cnps/depressionSelfAssessment.vue'; //抑郁自我评估2
import maritalQuality from './cnps/maritalQuality.vue'; //婚姻9
import perceivedStress from './cnps/perceivedStress.vue'; //知觉压力6
import socialSupportRatingScale from './cnps/socialSupportRatingScale.vue'; //社会支持评分量表3
export default {
	data() {
		return {
			domHeight: '',
			detailId: '',
			resultObj: {},
			lastValidStack: [],
			fromPage: '',
			appraisalId: 8,
			isShow: true
		};
	},
	components: {
		scl90Vue,
		anxietySelfAssessment,
		burnout,
		careerInterest,
		childRelationshipAssessment,
		childRelationshipDiagnosis,
		depressionSelfAssessment,
		maritalQuality,
		perceivedStress,
		socialSupportRatingScale
	},
	onLoad(options) {
		this.appraisalId = options.appraisalId;
		this.detailId = options.id;

		this.$nextTick(() => {
			if (this.$refs.stressRef) {
				this.$refs.stressRef.getDetail(this.detailId);
			}
			if (this.$refs.scl90Ref) {
				this.$refs.scl90Ref.getDetail(this.detailId);
			}
			if (this.$refs.maritalRef) {
				this.$refs.maritalRef.getDetail(this.detailId);
			}
			if (this.$refs.anxietyRef) {
				this.$refs.anxietyRef.getDetail(this.detailId);
			}
			if (this.$refs.burnoutRef) {
				this.$refs.burnoutRef.getDetail(this.detailId);
			}
			if (this.$refs.careerRef) {
				this.$refs.careerRef.getDetail(this.detailId);
			}
			if (this.$refs.AssessmentRef) {
				this.$refs.AssessmentRef.getDetail(this.detailId);
			}
			if (this.$refs.DiagnosisRef) {
				this.$refs.DiagnosisRef.getDetail(this.detailId);
			}
			if (this.$refs.depressionRef) {
				this.$refs.depressionRef.getDetail(this.detailId);
			}
			if (this.$refs.socialSupportRef) {
				this.$refs.socialSupportRef.getDetail(this.detailId);
			}
		});

		// getUserAppraisalResult({
		// 	appraisalId: options.id,
		// 	userId: uni.getStorageSync('user_id')
		// }).then((res) => {
		// 	// console.log(res);
		// 	this.resultObj = res.data;
		// 	this.appraisalId = res.data.appraisalId
		// });

		// getUserAppraisal().then(res=>{

		// })

		// console.log(getSystemInfo());

		const pages = getCurrentPages();
		if (pages.length > 1) {
			const prevPage = pages[pages.length - 2];
			this.fromPage = prevPage.route;
		}
	},
	methods: {
		onBeforeLeave() {
			this.isShow = false;
			// uni.showModal({
			// 	title: '确认返回',
			// 	success: (res) => {
			// 		if (res.confirm) uni.navigateBack();
			// 		else this.isShow = true;
			// 	}
			// });
			uni.switchTab({
				url: '/pages/index'
			});
		},
		back() {
			// let justQuestion = uni.getStorageSync('justQuestion')
			// if (justQuestion) {
			// 	uni.navigateBack({
			// 		delta: 3
			// 	});
			// } else {
			// 	uni.navigateBack({
			// 		delta: 2
			// 	});
			// }
			uni.switchTab({
				url: '/pages/index'
			});
		},
		goBack() {
			uni.switchTab({
				url: '/pages/index'
			});
		}
	},
	mounted() {
		const systemInfo = uni.getSystemInfoSync();
		let statusBarHeight = systemInfo.statusBarHeight || 20;
		// 示例计算公式（具体需根据组件实现调整）
		const height = statusBarHeight + 44 + 'px'; // 状态栏高度 + 导航栏内容高度
		this.domHeight = `calc(100% - ${height})`;
	}
};
</script>

<style scoped lang="scss">
page-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 999;
	background-color: transparent;
}

.page-content {
	width: 100%;
	height: 100%;
	background: white;
	border-radius: 16rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.result {
	width: 100%;
	height: 100%;
	// background-color: #ebebeb;
	background: linear-gradient(127deg, #a4dcb3 0%, #ffeed6 37%, #d3fffb 100%);

	.wrapp {
		position: relative;
	}

	.bg {
		width: 100%;
		height: 500rpx;
		position: absolute;
		left: 0;
		top: 0;
		// background: linear-gradient(117deg, #a9fdde 0%, #77b8fa 47%, #46add5 100%);
		border-radius: 0 0 80rpx 100rpx;
	}

	.wrap {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		.notice-mask {
			position: fixed;
			bottom: 0;
			left: 0;
			height: 166rpx;
			width: 100%;
			background-color: #fff;
			padding: 0 100rpx;
			display: flex;
			align-items: center;
			.notice-btn {
				background: #76a26f;
				color: #fff;
				border-radius: 50rpx;
				font-size: 32rpx;
				height: 80rpx;
				line-height: 80rpx;
				border: none;
				width: 50%;
				// box-shadow: 0 5rpx 20rpx rgba(255, 107, 107, 0.3);
			}
		}
		.scrollWrap {
			height: calc(100% - 166rpx);
			width: 100%;
			padding-bottom: 30rpx;
			border-radius: 16rpx;
		}

		.head {
			width: 100%;
			height: 170rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			display: flex;
			align-content: center;
			flex-wrap: wrap;

			> view:nth-child(1) {
				width: 100%;
				color: #fff;
				font-weight: bold;
				font-size: 40rpx;
				margin-bottom: 10rpx;
			}

			> view:nth-child(2) {
				width: 100%;
				color: #fff;
				font-size: 26rpx;
			}
		}

		.score {
			width: calc(100% - 60rpx);
			background-color: #fff;
			margin: auto;
			border-radius: 16rpx;
			position: relative;

			> view:nth-child(1) {
				width: 260rpx;
				height: 60rpx;
				text-align: center;
				line-height: 60rpx;
				font-size: 30rpx;
				color: #000;
				background: linear-gradient(117deg, #a9fdde 0%, #77b8fa 47%, #46add5 100%);
				position: absolute;
				left: calc(50% - 130rpx);
				top: 0;
				border-radius: 0 0 10rpx 10rpx;
			}

			> view:nth-child(2) {
				width: 100%;
				height: 60rpx;
			}

			> view:last-child {
				width: 100%;
				padding: 30rpx;
				font-size: 40rpx;
				font-weight: bold;
				color: #000;
				text-align: center;
			}
		}

		.result-little {
			width: calc(100% - 60rpx);
			background-color: #fff;
			border-radius: 16rpx;
			margin: 40rpx auto 20rpx;
			position: relative;

			> view:nth-child(1) {
				width: 260rpx;
				height: 60rpx;
				text-align: center;
				line-height: 60rpx;
				font-size: 30rpx;
				color: #000;
				background: linear-gradient(117deg, #a9fdde 0%, #77b8fa 47%, #46add5 100%);
				position: absolute;
				left: calc(50% - 130rpx);
				top: 0;
				border-radius: 0 0 10rpx 10rpx;
			}

			> view:nth-child(2) {
				width: 100%;
				height: 60rpx;
			}

			> view:last-child {
				width: 100%;
				padding: 30rpx;
				box-sizing: border-box;
				font-size: 20rpx;

				::v-deep .wrap-con {
					> view {
						font-size: 26rpx;
						color: #1f1f1f;
						line-height: 45rpx;
					}
				}

				::v-deep .fontWeightStyle {
					font-weight: bolder;
				}

				::v-deep .textIndetStyle {
					text-indent: 2em;
				}

				::v-deep .say {
					color: rgb(255, 0, 0) !important;
					font-size: 34rpx !important;
					margin: 20rpx 0 30rpx 0 !important;
				}
			}
		}
	}
}
</style>
